<template>
	<div class="page-container">
		<el-tabs v-model="activeName" @tab-click="handleClick" type="card">
			<el-tab-pane label="基础信息" name="0"></el-tab-pane>
			<el-tab-pane label="规格库存" name="1"></el-tab-pane>
			<el-tab-pane label="产品详情" name="2"></el-tab-pane>
			<el-tab-pane label="配送设置" name="3" v-if="form.goodsType == 0"></el-tab-pane>
			<el-tab-pane label="表单设置" name="6" v-if="form.goodsType == 3 || form.logistics == '2'"></el-tab-pane>
			<el-tab-pane label="营销设置" name="4"></el-tab-pane>
			<el-tab-pane label="其他设置" name="5"></el-tab-pane>
		</el-tabs>
		<div class="container-item">
			<el-form ref="ruleRefForm" :model="form" :rules="rules" size="small" label-width="110px">
				<!-- 基础信息 -->
				<template v-if="activeName == 0">
					<el-form-item label="产品类型:" prop="goodsType">
						<!-- <el-radio-group v-model="form.goodsType">
							<el-radio label="0">实物产品</el-radio>
							<el-radio label="1">卡密/网盘</el-radio>
							<el-radio label="2">付费优惠券</el-radio>
							<el-radio label="3">虚拟产品/服务</el-radio>
						</el-radio-group> -->
						<div :class="['good-type-box', form.goodsType == '0'?'choiceActive':'']" @click="form.goodsType = '0'">
							<div class="type-title">实物产品</div>
							<div class="center-text">通过物流/到店核销方式发货</div>
						</div>
						<div :class="['good-type-box', form.goodsType == '1'?'choiceActive':'']" @click="form.goodsType = '1'">
							<div class="type-title">卡密/网盘</div>
							<div class="center-text">无需物流</div>
						</div>
						<div :class="['good-type-box', form.goodsType == '2'?'choiceActive':'']" @click="form.goodsType = '2'">
							<div class="type-title">付费优惠卷</div>
							<div class="center-text">无需物流</div>
						</div>
						<div :class="['good-type-box', form.goodsType == '3'?'choiceActive':'']" @click="form.goodsType = '3'">
							<div class="type-title">虚拟产品/服务</div>
							<div class="center-text">无需物流</div>
						</div>
					</el-form-item>
					<el-form-item v-if="form.goodsType == '0'" label="物流方式:" prop="logistics">
						<el-radio-group v-model="form.logistics">
							<el-radio label="1">快递</el-radio>
							<el-radio label="2">到店核销</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="产品名称:" prop="spuName">
						<el-input style="width: 182px;" placeholder="请输入产品名称" v-model="form.spuName"></el-input>
					</el-form-item>
					<el-form-item label="产品分类:" prop="catalogId">
						<el-cascader :options="classify" :show-all-levels="false" v-model="form.catalogId"
							:props="{value: 'id', label: 'name'}"></el-cascader>
						<el-button type="primary" link size="small" @click="addClassify" style="margin-left:10px;">新增分类
						</el-button>
					</el-form-item>
					<el-form-item label="单位:" prop="unitName">
						<el-input style="width: 182px;" placeholder="请输入单位" v-model="form.unitName"></el-input>
					</el-form-item>
					<el-form-item label="产品轮播图:" prop="images">
						<div class="upload-box">
							<el-upload v-model:file-list="form.images" ref="uploadBanner" :action="uploadUrl" :headers="headers"
								list-type="picture-card" :auto-upload="true" :multiple="true" accept="image/*"
								:on-success="imagesOnSuccess">
								<el-icon>
									<ele-Camera />
								</el-icon>
								<template #file="{ file }">
									<img class="el-upload-list__item-thumbnail" :src="file.url" alt="图片" />
									<span class="el-upload-list__item-actions">
										<span class="el-upload-list__item-preview"
											@click="handlePictureCardPreview(file)">
											<el-icon>
												<ele-ZoomIn />
											</el-icon>
										</span>
										<span class="el-upload-list__item-delete" @click="handleRemove(file)">
											<el-icon>
												<ele-Delete />
											</el-icon>
										</span>
									</span>
								</template>
							</el-upload>
							<p class="alert-tips">建议尺寸:750px*750px, 可拖拽改变图片顺序</p>
						</div>
					</el-form-item>
					<el-form-item label="添加视频:">
						<el-switch v-model="form.hasVideo" :active-text="form.hasVideo == '1' ? '开启' : '关闭'"
							active-value="1" inactive-value="0"></el-switch>
					</el-form-item>
					<el-form-item label="视频类型:" v-if="form.hasVideo == '1'">
						<div>
							<el-radio-group v-model="form.videoType">
								<el-radio label="0">本地视频</el-radio>
								<el-radio label="1">视频链接</el-radio>
							</el-radio-group>
							<div class="image_list" v-if="form.videoType == 0">
								<el-upload v-model:file-list="videoList" ref="uploadBanner" :action="uploadUrl" :headers="headers"
									list-type="picture-card" :auto-upload="true" :multiple="false" :limit="1"
									accept="video/*" :on-change="handleChange">
									<el-icon>
										<ele-VideoCamera />
									</el-icon>
									<template #file="{ file }">
										<video class="el-upload-list__item-thumbnail" :src="file.url"></video>
										<span class="el-upload-list__item-actions">
											<span class="el-upload-list__item-preview"
												@click="handlePictureVideoPreview(file)">
												<el-icon>
													<ele-ZoomIn />
												</el-icon>
											</span>
											<span class="el-upload-list__item-delete" @click="handleRemove(file)">
												<el-icon>
													<ele-Delete />
												</el-icon>
											</span>
										</span>
									</template>
								</el-upload>
							</div>
							<el-input style="margin-top:10px" v-if="form.videoType == 1" placeholder="请输入视频链接"
								v-model="form.videoLink"></el-input>
							<p class="alert-tips">建议时长：9～30秒，视频宽高比16:9</p>
						</div>
					</el-form-item>
					<el-form-item label="产品状态:">
						<el-radio-group v-model="form.publishStatus">
							<el-radio label="1">上架</el-radio>
							<el-radio label="0">下架</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm(ruleRefForm)">下一步</el-button>
					</el-form-item>
				</template>
				<!-- 规格库存 -->
				<template v-if="activeName == 1">
					<el-form-item label="产品规格:" prop="specType">
						<el-radio-group v-model="form.specType">
							<el-radio label="0">单规格</el-radio>
							<el-radio label="1">多规格</el-radio>
						</el-radio-group>
					</el-form-item>
					<template v-if="form.specType == 0">
						<el-form-item label="图片:" prop="skuDefaultImg">
							<el-upload :file-list="form.skuInfo.skuDefaultImg" ref="uploadBanner" :action="uploadUrl" :headers="headers"
								list-type="picture-card" :auto-upload="true" :multiple="false" :limit="1" >
								<el-icon>
									<ele-Camera />
								</el-icon>
								<template #file="{ file }">
									<img class="el-upload-list__item-thumbnail" :src="file.url" />
									<span class="el-upload-list__item-actions">
										<span class="el-upload-list__item-preview"
											@click="handlePictureCardPreview(file)">
											<el-icon>
												<ele-ZoomIn />
											</el-icon>
										</span>
										<span class="el-upload-list__item-delete" @click="handleRemove(file)">
											<el-icon>
												<ele-Delete />
											</el-icon>
										</span>
									</span>
								</template>
							</el-upload>
						</el-form-item>
						<el-form-item label="产品售价:" prop="price">
							<!-- <el-input-number v-model="form.skuInfo.price" :min="0" :step="0.01" style="width:160px" /> -->
							<el-radio-group v-model="form.faceToDiscuss">
								<el-radio :label="0">自定义</el-radio>
								<el-radio :label="1">面议</el-radio>
							</el-radio-group>							
						</el-form-item>
						<el-form-item v-if="form.faceToDiscuss != '1'">
							<el-input v-model="form.skuInfo.price" type="number" :min="0" placeholder="请输入金额" style="width:180px">
								<template #append>元</template>
							</el-input>
						</el-form-item>
						<el-form-item label="原价(划线价):" prop="otPrice">
							<!-- <el-input-number v-model="form.skuInfo.otPrice" :min="0" :step="0.01" style="width:160px" /> -->
							<el-input v-model="form.skuInfo.otPrice" type="number" :min="0" placeholder="请输入金额" style="width:180px">
								<template #append>元</template>
							</el-input>
						</el-form-item>
						<el-form-item label="成本价:" prop="cost">
							<!-- <el-input-number v-model="form.skuInfo.cost" :min="0" :step="0.01" style="width:160px" /> -->
							<el-input v-model="form.skuInfo.cost" type="number" :min="0" placeholder="请输入金额" style="width:180px">
								<template #append>元</template>
							</el-input>
						</el-form-item>
						<el-form-item label="分销金(元):" prop="cost">
							<!-- <el-input-number v-model="form.skuInfo.saleMoney" :min="0" :step="1" :max="form.skuInfo.price" style="width:160px" /> -->
							<el-input v-model="form.skuInfo.saleMoney" type="number" :min="0" placeholder="请输入金额" style="width:180px">
								<template #append>元</template>								
							</el-input>
							<span style="color: blue; margin-left: 20px;">17互购商城代理联盟的提成费用，建议7%</span>
						</el-form-item>
						<el-form-item label="库存:" prop="stock">
							<!-- <el-input-number v-model="form.skuInfo.stock" :min="0" :step="1" style="width:160px" /> -->
							<el-input v-model="form.skuInfo.stock" type="number" :min="0" placeholder="请输入库存" style="width:180px">
								<template #append>件</template>
							</el-input>
						</el-form-item>
						<el-form-item label="产品编号:" prop="barCode">
							<el-input placeholder="请输入" v-model="form.skuInfo.barCode" style="width:160px"></el-input>
						</el-form-item>
						<el-form-item label="重量(KG):" prop="weight" v-if="form.goodsType == 0">
							<!-- <el-input-number v-model="form.skuInfo.weight" :min="0" :step="0.01" style="width:160px" /> -->
							<el-input v-model="form.skuInfo.weight" type="number" :min="0" placeholder="请输入重量" style="width:180px">
								<template #append>KG</template>
							</el-input>
						</el-form-item>
						<el-form-item label="体积(m³):" prop="volume" v-if="form.goodsType == 0">
							<!-- <el-input-number v-model="form.skuInfo.volume" :min="0" :step="0.01" style="width:160px" /> -->
							<el-input v-model="form.skuInfo.volume" type="number" :min="0" placeholder="请输入体积" style="width:180px">
								<template #append>m³</template>
							</el-input>
						</el-form-item>
						
						
						<el-form-item label="卡密" prop="volume" v-if="form.goodsType == 1">
							<el-button type="warning" plain @click="addVirtual" v-if="form.skuInfo.virtualType == null || form.skuInfo.virtualType == ''  ">+ 添加卡密</el-button>
							
							<el-button type="text" plain @click="addVirtual" v-if="form.skuInfo.virtualType != null && form.skuInfo.virtualType != ''  "> 已设置</el-button>
						</el-form-item>
						
						<el-form-item label="优惠券" prop="volume" v-if="form.goodsType == 2">
							<el-tag class="mx-1" closable :disable-transitions="false"  @close="handleRemoveCoupon(-1)" v-if="form.skuInfo.couponId != '' && form.skuInfo.couponId != null" >
							    {{ form.skuInfo.couponName }}
							  </el-tag>
							<el-button type="warning" plain @click="addCoupon" v-if="form.skuInfo.couponId == '' || form.skuInfo.couponId == null">+ 添加优惠券</el-button>
						</el-form-item>
						
					</template>
					<template v-if="form.specType == 1">
						<el-form-item label="选择规格:">
							<el-select v-model="specValue" multiple placeholder="请选择" @change="chooseSpec"
								@visible-change="handleSelectAttr" style="width:160px">
								<el-option v-for="item in specList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
							<!-- <el-button type="primary" @click="submitSpec">确认</el-button> -->
							<el-button type="primary" @click="openSpec" style="margin-left:10px">添加属性模板</el-button>
						</el-form-item>
						<el-form-item>
							<div>
								<div class="specList" v-for="(item, index) in form.specList" :key="item.id">
									<el-row class="spec-name" align="middle">
										<div>属性名: {{item.label}}</div>
										<div class="spec-icon" @click="delSpecItem(index)">
											<el-icon color="var(--el-text-color-regular)">
												<ele-CircleCloseFilled />
											</el-icon>
										</div>
									</el-row>
									<div class="spec-list spec-tag">
										<el-tag v-for="(value, idx) in item.valueSelect" :key="value" closable
											size="small" style="margin-right:10px" effect="light"
											@close="delSpec(index, idx)">{{value}}</el-tag>
										<div class="spec_area">
											<el-button v-if="!item.showInput" size="small" type="primary" @click="showTagInput(index)">
												<i class="fa fa-plus" aria-hidden="true"></i>
												添加属性值
											</el-button>
											<el-input :id="item.specValueName" v-if="item.showInput" placeholder="请输入" v-model="item.specValueName"
												style="width: 120px" @change="addSpec(index)"></el-input>
											<!-- <el-button size="small" type="primary" @click="addSpec(index)"
												:disabled="!item.specValueName">添加属性值</el-button> -->
										</div>
									</div>
								</div>
								<el-form :inline="true" :model="newSpecForm" v-if="isaddNewSpec">
									<el-form-item label="规格" style="margin-bottom:18px;">
										<el-input v-model="newSpecForm.label" placeholder="请输入规格名称"></el-input>
									</el-form-item>
									<el-form-item label="属性值" style="margin-bottom:18px;align-items:center">
										<el-select v-model="newSpecForm.valueSelect" multiple filterable allow-create
											default-first-option placeholder="请选择属性值">
											<el-option v-for="item in newSpecOptions" :key="item.value"
												:label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="saveNewSpec">确认</el-button>
										<el-button @click="isaddNewSpec = false">取消</el-button>
									</el-form-item>
								</el-form>
								<el-row v-if="!isaddNewSpec">
									<el-button type="warning" plain @click="addNewSpec">+ 添加新规格</el-button>
									<!-- <el-button type="primary" @click="calculateSpec">立即生成</el-button> -->
								</el-row>
							</div>
						</el-form-item>
						<el-form-item v-if="specArr.length > 0">
							<span class="label-tips">批量设置:</span>
							<el-table :data="specBatch" border class="formTable" size="small">
								<el-table-column label="图片" align="center" min-width="100px">
									<template #default="scope">
										<div class="skuImg">
											<el-upload ref="uploadBanner" :show-file-list="false" :action="uploadUrl" :headers="headers"
												:auto-upload="true" :multiple="false" :limit="1"
												:on-success="handleSkuBatchImgSuccess">
												<el-image v-if="scope.row.skuDefaultImg"
													style="width: 50px; height: 50px" :src="scope.row.skuDefaultImg"
													fit="contain" />
												<el-icon v-else size="14px" class="uploader-icon">
													<ele-Camera />
												</el-icon>
											</el-upload>
										</div>
									</template>
								</el-table-column>
								<el-table-column label="名称" align="center" min-width="160px">
									<template #default="scope">
										<el-input v-model="scope.row.skuName" type="text" placeholder="请输入产品名称"></el-input>
									</template>
								</el-table-column>
								
								<el-table-column label="售价" align="center" min-width="160px">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.price" :min="0"></el-input-number> -->
										<el-input v-model="scope.row.price" type="number" :min="0" placeholder="请输入售价" style="width:140px">
											<template #append>元</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="成本价" align="center" min-width="160px">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.cost" :min="0"></el-input-number> -->
										<el-input v-model="scope.row.cost" type="number" :min="0" placeholder="请输入成本价" style="width:140px">
											<template #append>元</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="原价" align="center" min-width="160px">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.otPrice" :min="0"></el-input-number> -->
										<el-input v-model="scope.row.otPrice" type="number" :min="0" placeholder="请输入原价" style="width:140px">
											<template #append>元</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="库存" align="center" min-width="160px">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.stock" :min="0" step-strictly :step="1"></el-input-number> -->
										<el-input v-model="scope.row.stock" type="number" :min="0" placeholder="请输入库存" style="width:140px">
											<template #append>件</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="产品编号" align="center" min-width="160px">
									<template #default="scope">
										<el-input v-model="scope.row.barCode" placeholder="请输入"></el-input>
									</template>
								</el-table-column>
								
								<el-table-column label="重量(KG)" align="center" min-width="160px"  v-if="form.goodsType == 0">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.weight" :min="0"></el-input-number> -->
										<el-input v-model="scope.row.weight" type="number" :min="0" placeholder="请输入重量" style="width:140px">
											<template #append>KG</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="体积(m³)" align="center" min-width="160px"  v-if="form.goodsType == 0">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.volume" :min="0"></el-input-number> -->
										<el-input v-model="scope.row.volume" type="number" :min="0" placeholder="请输入体积" style="width:140px">
											<template #append>m³</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="操作" align="center" fixed="right" width="120px">
									<template #default>
										<el-button type="primary" link size="small" @click="addBatch">批量添加</el-button>
										<el-button type="primary" link size="small" @click="clearBatch">清空</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-form-item>
						<el-form-item v-if="specArr.length > 0">
							<span class="label-tips">产品属性:</span>
							<el-table :data="specArr" border class="formTable" size="small">
								<el-table-column v-for="(item, index) in form.specList" :key="item.value"
									:label="item.label" :prop="`value${index + 1}`" align="center"></el-table-column>
								<el-table-column label="图片" align="center" min-width="100px">
									<template #default="scope">
										<div class="skuImg">
											<el-upload ref="uploadBanner" :show-file-list="false" :action="uploadUrl" :headers="headers"
												:auto-upload="true" :multiple="false" :limit="1"
												:on-success="(response, file, fileList) => handleSkuImgSuccess(response, file, fileList, scope.$index)">
												<el-image v-if="scope.row.skuDefaultImg"
													style="width: 50px; height: 50px" :src="scope.row.skuDefaultImg"
													fit="contain" />
												<el-icon v-else size="14px" class="uploader-icon">
													<ele-Camera />
												</el-icon>
											</el-upload>
										</div>
									</template>
								</el-table-column>
								<el-table-column label="名称" align="center" min-width="160px">
									<template #default="scope">
										<el-input v-model="scope.row.skuName" placeholder="请输入产品名称"></el-input>
									</template>
								</el-table-column>
								<el-table-column label="优惠券" align="center"  v-if="form.goodsType == 2" width="160px">
									<template #default="scope">
										<el-tag class="mx-1" closable :disable-transitions="false"  @close="handleRemoveCoupon(scope.$index)" v-if="scope.row.couponId != '' && scope.row.couponId != null" >
										    {{ scope.row.couponName }}
										  </el-tag>
										<el-button type="warning" plain @click="addCoupon(scope.$index)" v-if="scope.row.couponId == '' || scope.row.couponId == null">+ 添加优惠券</el-button>
									</template>
								</el-table-column>
								
								<el-table-column label="卡密" align="center"  v-if="form.goodsType == 1" width="160px">
									<template #default="scope">
										<el-button type="warning" plain @click="addVirtual(scope.$index)" v-if="scope.row.virtualType == null || scope.row.virtualType == ''  ">+ 添加卡密</el-button>
										
										<el-button type="text" plain @click="addVirtual(scope.$index)" v-if="scope.row.virtualType != null && scope.row.virtualType != ''  "> 已设置</el-button>
									</template>
								</el-table-column>
								<el-table-column label="售价" align="center" min-width="160px">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.price" :min="0"></el-input-number> -->
										<el-input v-model="scope.row.price" type="number" :min="0" placeholder="请输入售价" style="width:140px">
											<template #append>元</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="原价" align="center" min-width="160px">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.otPrice" :min="0"></el-input-number> -->
										<el-input v-model="scope.row.otPrice" type="number" :min="0" placeholder="请输入原价" style="width:140px">
											<template #append>元</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="成本价" align="center" min-width="160px">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.cost" :min="0"></el-input-number> -->
										<el-input v-model="scope.row.cost" type="number" :min="0" placeholder="请输入成本价" style="width:140px">
											<template #append>元</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="分销金" align="center" min-width="160px">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.saleMoney" :min="0" :max="scope.row.price"></el-input-number> -->
										<el-input v-model="scope.row.saleMoney" type="number" :min="0" placeholder="请输入分销金" style="width:140px">
											<template #append>元</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="库存" align="center" min-width="160px">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.stock" :min="0" step-strictly :step="1"></el-input-number> -->
										<el-input v-model="scope.row.stock" type="number" :min="0" placeholder="请输入库存" style="width:140px">
											<template #append>件</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="产品编号" align="center" min-width="160px">
									<template #default="scope">
										<el-input v-model="scope.row.barCode" placeholder="请输入"></el-input>
									</template>
								</el-table-column>
								
								<el-table-column label="重量(KG)" align="center" min-width="160px" v-if="form.goodsType == 0">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.weight" :min="0"></el-input-number> -->
										<el-input v-model="scope.row.weight" type="number" :min="0" placeholder="请输入重量" style="width:140px">
											<template #append>KG</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="体积(m³)" align="center" min-width="160px" v-if="form.goodsType == 0">
									<template #default="scope">
										<!-- <el-input-number v-model="scope.row.volume" :min="0"></el-input-number> -->
										<el-input v-model="scope.row.volume" type="number" :min="0" placeholder="请输入体积" style="width:140px">
											<template #append>m³</template>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column label="操作" align="center" fixed="right" min-width="120px">
									<template #default="scope">
										<el-button type="primary" link size="small"
											@click="removeSpecItem(scope.$index, specArr)">删除
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-form-item>
					</template>
					<el-form-item>
						<el-button @click="lastStep">上一步</el-button>
						<el-button type="primary" @click="submitForm(ruleRefForm)">下一步</el-button>
					</el-form-item>
				</template>
				<!-- 产品详情 -->
				<template v-if="activeName == 2">
					<el-form-item label="产品详情:">
						<div class="desc-list">
							<div class="desc-content">
								<Editor v-model="form.decript" />
							</div>
							<div class="phone-model">
								<div class="phone-title">详情预览</div>
								<div v-html="form.decript" class="model-container"></div>
							</div>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button @click="lastStep">上一步</el-button>
						<el-button type="primary" @click="submitForm(ruleRefForm)">下一步</el-button>
					</el-form-item>
				</template>
				<!-- 物流设置 -->
				<template v-if="activeName == 3">
					<el-form-item label="物流方式:" prop="logistics">
						<!-- <el-checkbox-group v-model="form.logistics">
							<el-checkbox label="1">快递</el-checkbox>
							<el-checkbox label="2">到店核销</el-checkbox>
						</el-checkbox-group> -->
						{{ form.logistics == '1'?'快递':'到店核销' }}
					</el-form-item>
					<el-form-item v-if="form.logistics == '1'" label="运费设置:" prop="freight">
						<el-radio-group v-model="form.freight">
							<el-radio label="2">包邮</el-radio>
							<el-radio label="0">固定邮费</el-radio>
							<el-radio label="1">运费模板</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item prop="postage" v-if="form.freight == 0">
						<el-input-number v-model="form.postage" :min="0" :step="0.01" />
					</el-form-item>
					<el-form-item prop="tempId" v-if="form.freight == 1">
						<el-select v-model="form.tempId" placeholder="请选择" @visible-change="handleSelectTemp">
							<el-option v-for="item in logisticList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
						<el-button type="primary" link style="margin-left:10px" @click="addFeeModel">添加运费模板</el-button>
					</el-form-item>
					<el-form-item>
						<el-button @click="lastStep">上一步</el-button>
						<el-button type="primary" @click="submitForm(ruleRefForm)">下一步</el-button>
					</el-form-item>
				</template>
				<!-- 营销设置 -->
				<template v-if="activeName == 4">
					<el-form-item label="虚拟销量:" prop="ficti">
						<el-input-number v-model="form.ficti" :min="0" step-strictly :step="1"></el-input-number>
					</el-form-item>
					<el-form-item label="排序:" prop="sort">
						<el-input-number v-model="form.sort" :min="0" step-strictly :step="1"></el-input-number>
					</el-form-item>
					<el-divider></el-divider>
					<!-- <el-form-item label="赠送积分:" prop="giveIntegral">
						<el-input-number v-model="form.giveIntegral" :min="0"></el-input-number>
					</el-form-item> -->
					<el-form-item label="赠送购物券:" prop="discount">
						<el-tag class="spec-tag" v-for="(item, index) in form.discount" :key="item.id" closable
							size="small" style="margin-right:10px;height: 25px;" effect="light"
							@close="delDiscount(index)">{{item.couponName}}</el-tag>
						<el-button type="primary" size="small" class="spec_btn" @click="addDiscount">添加购物券</el-button>
					</el-form-item>
					<el-form-item label="关联用户标签:" prop="label">
						<el-tag class="spec-tag" v-for="(item, index) in form.memberLabelList" :key="item.id" closable
							size="small" style="margin-right:10px;height: 25px;" effect="light"
							@close="delmemberLabel(index)">{{item.labelName}}</el-tag>
						<el-button type="primary" size="small" class="spec_btn" @click="relationLabel">关联用户标签
						</el-button>
						<el-button type="primary" size="small" link @click="addLabel" style="margin-left: 10px;">新增标签
						</el-button>
					</el-form-item>

					<el-form-item label="关联需求表:" prop="label">
						<el-tag class="spec-tag" v-if="form.isHasPaper == 1"  closable
							size="small" style="margin-right:10px;height: 25px;" effect="light"
							@close="delPaper">{{form.paperName}}</el-tag>
						<el-button type="primary" size="small" class="spec_btn" @click="relationPaper">关联需求调查表
						</el-button>
					</el-form-item>

					<el-divider></el-divider>
					<el-form-item label="付费会员专属:" prop="vipProduct">
						<el-switch v-model="form.vipProduct" :active-text="form.vipProduct == 1 ? '开启' : '关闭'"
							active-value="1" inactive-value="0"></el-switch>
					</el-form-item>
					<el-form-item label="单独设置:" prop="otherType">
						<el-checkbox-group v-model="form.otherType">
							<el-checkbox label="1" v-if="false" >佣金设置</el-checkbox>
							<el-checkbox label="2">付费会员价</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<template v-if="form.otherType.length > 0">

						<template v-if="form.specType == 0 && form.otherType != ''">
							<el-form-item label="图片:" prop="skuDefaultImg">
								<el-upload :file-list="form.skuInfo.skuDefaultImg" ref="uploadBanner" :headers="headers"
									:action="uploadUrl" list-type="picture-card" :auto-upload="true" :multiple="false"
									:limit="1">
									<el-icon>
										<ele-Camera />
									</el-icon>
									<template #file="{ file }">
										<img class="el-upload-list__item-thumbnail" :src="file.url" />
										<span class="el-upload-list__item-actions">
											<span class="el-upload-list__item-preview"
												@click="handlePictureCardPreview(file)">
												<el-icon>
													<ele-ZoomIn />
												</el-icon>
											</span>
											<span class="el-upload-list__item-delete" @click="handleRemove(file)">
												<el-icon>
													<ele-Delete />
												</el-icon>
											</span>
										</span>
									</template>
								</el-upload>
							</el-form-item>
							<el-form-item label="一级返佣:" v-if="form.otherType.includes('1')">
								<el-input-number v-model="form.skuInfo.brokerage"  :min="0" style="width:160px" />
							</el-form-item>
							<el-form-item label="二级返佣:" v-if="form.otherType.includes('1')">
								<el-input-number v-model="form.skuInfo.brokerageTwo"  :min="0" style="width:160px" />
							</el-form-item>
							<el-form-item label="会员价" v-if="form.otherType.includes('2')">
								<el-input-number v-model="form.skuInfo.vipPrice" :min="0"  style="width:160px" />
							</el-form-item>
						</template>
						<template v-if="form.specType == 1 &&  specArr.length > 0 && form.otherType != '' ">
							<el-form-item label="批量设置:">
								<div class="batch-list">
									<div v-if="form.otherType.includes('1')">
										<span class="small-tips">一级返佣:</span>
										<el-input-number :min="0" v-model="otherSetting.brokerage" @change="addBatchOther"></el-input-number>
									</div>
									<div v-if="form.otherType.includes('1')" style="margin-left:18px">
										<span class="small-tips">二级返佣:</span>
										<el-input-number :min="0" v-model="otherSetting.brokerageTwo" @change="addBatchOther"></el-input-number>
									</div>
									<div v-if="form.otherType.includes('2')" style="margin-left:18px">
										<span class="small-tips">会员价:</span>
										<el-input-number :min="0" v-model="otherSetting.vipPrice" @change="addBatchOther"></el-input-number>
									</div>
								</div>
							</el-form-item>
							
							<el-form-item label="产品属性:">
								<el-table :data="specArr" border class="formTable">
									<el-table-column v-for="(item, index) in form.specList" :key="item.id"
										:label="item.name" :prop="`value${index + 1}`" align="center"></el-table-column>
									<el-table-column label="图片" align="center" width="100px">
										<template #default="scope">
											<el-image style="width: 60px; height: 60px" :src="scope.row.skuDefaultImg"
												fit="cover">
											</el-image>
										</template>
									</el-table-column>
									<el-table-column label="一级返佣" align="center" min-width="160px"
										v-if="form.otherType.includes('1')">
										<template #default="scope">
											<el-input-number v-model="scope.row.brokerage" :min="0"></el-input-number>
										</template>
									</el-table-column>
									<el-table-column label="二级返佣" align="center" min-width="160px"
										v-if="form.otherType.includes('1')">
										<template #default="scope">
											<el-input-number v-model="scope.row.brokerageTwo" :min="0">
											</el-input-number>
										</template>
									</el-table-column>
									<el-table-column label="会员价" align="center" min-width="160px"
										v-if="form.otherType.includes('2')">
										<template #default="scope">
											<el-input-number v-model="scope.row.vipPrice" :min="0"></el-input-number>
										</template>
									</el-table-column>
								</el-table>
							</el-form-item>
						</template>
					</template>
					<el-divider></el-divider>
					<el-form-item v-if="false" label="是否限购:" prop="isLimit">
						<el-switch v-model="form.isLimit" :active-text="form.isLimit == 1 ? '开启' : '关闭'"
							active-value="1" inactive-value="0"></el-switch>
					</el-form-item>
					<el-form-item label="限购类型:" v-if="form.isLimit == 1" prop="limitType">
						<el-radio-group v-model="form.limitType">
							<el-radio label="1">单次限购</el-radio>
							<el-radio label="2">永久限购</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="限购数量:" v-if="form.isLimit == 1">
						<div class="form-cell">
							<el-input v-model="form.limitNum" style="width: 160px;">
								<template #append>件</template>
							</el-input>
						</div>
					</el-form-item>
					<el-form-item v-if="false" label="预售产品:" prop="presale">
						<el-switch v-model="form.presale" :active-text="form.presale == 1 ? '开启' : '关闭'"
							active-value="1" inactive-value="0"></el-switch>
					</el-form-item>
					<el-form-item label="预售活动时间:" prop="preSaleTime" v-if="form.presale == 1">
						<el-date-picker v-model="form.preSaleTime" type="datetimerange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss"
							style="width: 320px;flex:unset"></el-date-picker>
					</el-form-item>
					<el-form-item label="发货时间:" prop="presaleDay" v-if="form.presale == 1">
						<el-input v-model="form.presaleDay" style="width: 320px">
							<template #prepend>预售活动结束后</template>
							<template #append>天之内</template>
						</el-input>
					</el-form-item>
					<el-form-item label="产品推荐:" prop="recommendType">
						<el-checkbox-group v-model="form.recommendType">
							<el-checkbox label="1">热卖单品</el-checkbox>
							<el-checkbox label="2">促销单品</el-checkbox>
							<el-checkbox label="3">精品推荐</el-checkbox>
							<el-checkbox label="4">首发新品</el-checkbox>
							<el-checkbox label="5">优品推荐</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item>
						<el-button @click="lastStep">上一步</el-button>
						<el-button type="primary" @click="submitForm(ruleRefForm)">下一步</el-button>
					</el-form-item>
				</template>
				<!-- 其他设置 -->
				<template v-if="activeName == 5">
					<el-form-item label="产品关键字:" prop="keyword">
						<el-input v-model="form.keyword" placeholder="请输入产品关键字" style="width:220px;"></el-input>
					</el-form-item>
					<el-form-item v-if="false" label="产品简介:" prop="spuDescription">
						<el-input v-model="form.spuDescription" placeholder="请输入产品简介" type="textarea" :rows="3"
							style="width:220px;"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="lastStep">上一步</el-button>
						<el-button type="primary" @click="submitForm(ruleRefForm)">保存</el-button>
					</el-form-item>
				</template>
				<!-- 表单设置 -->
				<template v-if="activeName == 6">
					<div style="height: 89vh;">
						<div style="display: flex;">
							<img src="https://17work-1304122643.cos.ap-guangzhou.myqcloud.com/17work/0/20230625/D729F4DEDC5A47AE9BDCF5050DD1B423.png" style="width: 48px; height: 48px; margin-right: 20px;">
							<div>
								<div style="font-size: 16px;color: #333;font-weight: 700;">无需配送</div>
								<div style="font-size: 12px;color: #666;margin-top: 8px;">买家可购买无需配送的产品，由商家在线上或其他渠道完成交货</div>
							</div>
						</div>
						<el-divider />
						<el-row style="height: 89%;">
							<el-col :span="14">
								<div style="display: flex; align-items: center;">
									<div>附加表单：</div>
									<el-button size="small" style="height: 30px; margin-left: 20px;" @click="showFormDetail(0, null)">
										<i class="fa fa-plus" aria-hidden="true"></i>
										添加信息项
									</el-button>
								</div>
								<el-table :data="form.formSettingList" stripe style="width: auto; margin: 30px 80px 20px; border: 1px solid #f2f2f2;">
									<el-table-column prop="name" label="信息项"/>
									<el-table-column prop="typeName" label="类型" />
									<el-table-column prop="isRequired" label="是否必填" >
										<template #default="scope">
											<el-switch v-model="scope.row.isRequired" :active-value="1" :inactive-value="0" @change="updateFormState(scope.row)"/>
										</template>
									</el-table-column>
									<el-table-column label="操作" width="120">
										<template #default="scope">
											<el-button link type="primary" size="small" @click="showFormDetail(1, scope.row)">编辑</el-button>
											<el-button link type="primary" size="small" @click="deleteFormData(scope.row, scope.$index)">删除</el-button>
										</template>
									</el-table-column>
								</el-table>
							</el-col>
							<el-col :span="10" style="border-left: 1px solid #f2f2f2; display: flex; flex-direction: column; align-items: center; height: 100%;">
								<div style="display: flex; justify-content: center; margin-bottom: 20px;">
									<el-button :class="imgIdx == 0?'img-idx-activity':''" @click="imgIdx = 0" style="height: 30px;">订单结算页</el-button>
									<el-button :class="imgIdx == 1?'img-idx-activity':''" @click="imgIdx = 1" style="height: 30px; margin-left: 0px;">订单详情页</el-button>
								</div>
								<img :src="formImages[imgIdx]" style="width: 375px; height: 667px; border: 1px solid #e3e3e3;">
							</el-col>
						</el-row>
					</div>
				</template>
			</el-form>
		</div>
		<el-dialog v-model="dialogBannerVisible" title="图片预览">
			<img w-full :src="dialogImageUrl" alt="图片预览" style="display:block;margin: 0 auto;width:100%" />
		</el-dialog>
		<el-dialog v-model="dialogVideoVisible" title="视频预览">
			<video alt="视频预览" style="display:block;margin: 0 auto;height:300px;width:100%;background: #000;" controls>
				<source :src="dialogVideoUrl" type="video/mp4" />
			</video>
		</el-dialog>
		<classify-detail v-model:dialogDrawer="dialogClassifyVisible" title="新增分类" :default-form="classifyForm"
			@onDetailSubmit="classifySubmit" :classify-list="classify"></classify-detail>
		<spec-detail v-model:dialogDrawer="dialogSpecVisible" title="新增规格" :default-form="specForm"></spec-detail>
		<select-coupon v-model:dialogDrawer="dialogCouponVisible" title="选择优惠券" :is-batch="isBatch"
			@onSelectSubmit="selectCouponSubmit" :couponData="form.discount" :defaultSearchForm="defaultSearchForm"></select-coupon>
		<member-label-detail v-model:dialogDrawer="dialogMemberLabelVisible" :title="memberLabelTitle" :is-add="true"
			@onMemberLabelSubmit="memberLabelSubmit" :memberLabelCategoryList="memberLabelCategoryList"
			:memberLabelList="memberLabelList" :selectMemberLabelIds="selectMemberLabelIds"></member-label-detail>
			
			<virtual-detail v-model:dialogDrawer="dialogVirtualVisible" title="添加卡密" @onDetailSubmit="addVirtualSubmit" :defaultForm="virtualForm"></virtual-detail>
		<select-paper v-model:dialogDrawer="dialogPaperVisible" :title="paperTitle" :is-batch="isPaperBatch" @onSelectSubmit="selectPaperSubmit"></select-paper>
		<logistic-detail v-model:dialogDrawer="dialogLogisticVisible" :defaultForm="logisticForm" title="新增运费模板" @onDetailSubmit="addLogistic" ></logistic-detail>
		<FormTypeDetail v-model:dialogDrawer="dialogFormVisible" :defaultForm="formTypeData" :title="formTitle" :isEdit="isEdit" 
			 @onSubmit="refreshClick"></FormTypeDetail>
	</div>
</template>

<script>
	import {
		reactive,
		toRefs,
		nextTick,
		onMounted,
		ref,
		toRef
	} from 'vue'
	import Sortable from 'sortablejs'
	import {
		ElMessage, ElMessageBox
	} from 'element-plus'
	import {
		useRoute,useRouter
	} from 'vue-router'
	import Editor from '/@/components/editor/index.vue'
	import ClassifyDetail from '../../components/ClassifyDetail.vue'
	import SpecDetail from '../../components/SpecDetail.vue'
	import SelectCoupon from '../../components/SelectCoupon.vue'
	import MemberLabelDetail from '../../components/MemberLabelDetail.vue'
	import VirtualDetail from '../../components/VirtualDetail.vue'
	import SelectPaper from '../../components/SelectPaper.vue'
	import LogisticDetail from '../../components/LogisticDetail.vue'
	import FormTypeDetail from '../../components/FormTypeDetail.vue'
	import { Session } from '/@/utils/storage'
	import { useFormList } from '/@/stores/formSetting'
	import {
		getCategoryTree,
		create as createCategory
	} from '/@/api/pms/category'
	import {
		selectAttr
	} from '/@/api/pms/attr'
	import {
		create,
		update,
		get as getSpuInfo,
		getMemberLabelList,
		getMemberLabelCategoryList
	} from '/@/api/pms/spu'
	import {
		getList as getTempList
	} from '/@/api/pms/freight'
	import api from '/@/api/commonApi'
	export default {
		name: 'GoodsDetail',
		props: {
			isEdit: {
				type: Boolean,
				default: false
			}
		},
		components: {
			Editor,
			ClassifyDetail,
			SpecDetail,
			SelectCoupon,
			MemberLabelDetail,
			VirtualDetail,
			SelectPaper,
			LogisticDetail,
			FormTypeDetail
		},
		setup(props) {
			const {
				isEdit
			} = toRefs(props)
			const route = useRoute()
			const router = useRouter()
			const formStores = useFormList();
			const state = reactive({
				uploadUrl: '/api/file/filaAttach/upload',
				headers: {
					'17work': Session.get('token')
				},
				activeName: '0',
				formList: [],
				form: {
					id: '',
					goodsType: '0',
					catalogId: '',
					spuName: '',
					unitName: '',
					images: [],
					hasVideo: '1',
					videoType: '0',
					videoLink: '',
					publishStatus: '0',
					specType: '0',
					skuInfo: {
						price: 0,
						cost: 0,
						otPrice: 0,
						saleMoney: 0,
						stock: 0,
						volume: 0,
						weight: 0,
						isVirtual: 0,
						diskInfo:'',
						virtualType: ''
					},
					specList: [],
					// logistics: ['1'],
					logistics: '1',
					freight: '2',
					postage: 0,
					tempId: null,
					ficti: 0,
					sort: 0,
					giveIntegral: 0,
					discount: [],
					vipProduct: '0',
					otherType: [],
					isLimit: '0',
					limitType: '1',
					limitNum: 1,
					presale: '0',
					preSaleTime: [],
					presaleDay: '',
					recommendType: ['1'],
					keyword: '',
					virtualType: 0,
					isVirtual: 0,
					formSettingList: [
						{ 
							name: '姓名',
							typeName: '单行文本',
							typeValue: 0,
							hintText: '请输入姓名',
							optionList: [],
							preciseNum: 0,
							inputNum: 0,
							dateType: 0,
							isRequired: 0,
							preciseLevel: 0,
							isShieldTime: 0,
							shieldTimeList: [],
							isShieldDate: 0,
							shieldDateList: [],
							idx: 0, // 标识
						},
						{ 
							name: '联系方式',
							typeName: '手机号',
							typeValue: 3,
							hintText: '请输入手机号',
							optionList: [],
							preciseNum: 0,
							inputNum: 0,
							dateType: 0,
							isRequired: 0,
							preciseLevel: 0,
							isShieldTime: 0,
							shieldTimeList: [],
							isShieldDate: 0,
							shieldDateList: [],
							idx: 1, // 标识
						},
					],
					faceToDiscuss: 0,
				},
				rules: {
					spuName: [{
						required: true,
						message: '请输入产品名称',
						trigger: 'blur'
					}],
					// catalogId: [{
					// 	required: true,
					// 	message: '请选择产品分类',
					// 	trigger: 'blur'
					// }],
					goodsType: [{
						required: true,
						message: '请选择产品类型',
						trigger: 'blur'
					}],
					unitName: [{
						required: true,
						message: '请输入单位',
						trigger: 'blur'
					}],
					images: [{
						required: true,
						message: '请上传轮播图',
						trigger: 'blur'
					}],
				},
				classify: [],
				isMultiple: false,
				imageType: '',
				specIndex: null,
				specValue: '',
				specList: [],
				specId: '',
				specForm: {},
				specArr: [],
				specBatch: [{
					skuDefaultImg: '',
					price: 0,
					cost: 0,
					weight: 0,
					volume: 0,
					otPrice: 0,
					barCode: '',
					vipPrice: 0,
					brokerage: 0,
					brokerageTwo: 0,
					stock: 0
				}],
				newSpecForm: {
					label: '',
					valueSelect: []
				},
				newSpecOptions: [],
				logisticList: [],
				labelList: [{
					value: 1,
					label: '购买意向',
					children: [{
						value: 2,
						label: '阿拉蕾'
					}]
				}, {
					value: 2,
					label: '客户地区',
					children: [{
						value: 3,
						label: '嘟嘟嘟'
					}]
				}],
				isaddNewSpec: false,
				logisticForm: {},
				firstReback: 0,
				secondReback: 0,
				vipPrice: 0,
				classifyForm: {
					parentId: 0,
					name: '',
					icon: '',
					sort: 1,
					showStatus: 1
				},
				videoList: [],
				dialogType: 'image',
				dialogImageUrl: '',
				dialogVideoUrl: '',
				dialogMaterialVisible: false,
				dialogSpecVisible: false,
				dialogLogisticVisible: false,
				dialogLabelVisible: false,
				dialogClassifyVisible: false,
				dialogBannerVisible: false,
				dialogVideoVisible: false,
				dialogCouponVisible: false,
				dialogMemberLabelVisible: false,
				memberLabelTitle: '',
				memberLabelCategoryList: [],
				memberLabelList: [],
				selectMemberLabelIds: [],
				isBatch:false,
				defaultSearchForm:{},
				couponType: 0,
				specArrIndex: 0,
				dialogVirtualVisible:false,
				virtualForm:{
					virtualType: '0',
					diskInfo:'',
					virtuals:[],
					stock:0
				},
				otherSetting:{
					brokerageTwo:0,
					brokerage:0,
				    vipPrice:0
				},
				paperTitle:'',
				dialogPaperVisible:false,
				isPaperBatch:false,
				goodTypesDict: [
					{name: '实物物品', value: 0, info: '通过物流/到店核销方式发货'},
					{name: '卡密/网盘', value: 1, info: '无需物流'},
					{name: '付费优惠卷', value: 2, info: '无需物流'},
					{name: '虚拟产品/服务', value: 3, info: '无需物流'}
				],
				formImages: [
					'https://17work-1304122643.cos.ap-guangzhou.myqcloud.com/17work/0/20230625/97DB7B4A94944F01B5933A12A7B77C97.png',
					'https://17work-1304122643.cos.ap-guangzhou.myqcloud.com/17work/0/20230625/5D598FED85C14FC8B01A5CA4472998EA.png'
				],
				imgIdx: 0,
				dialogFormVisible: false,
				formTypeData: {},
				formTitle: '添加信息项'
			})
			onMounted(() => {
				getCategory()
				handleSelectTemp()
				if (isEdit.value) {
					getSpuInfo(route.query.id).then(res => {
						let images = []
						for (let i of res.data.images) {
							images.push({
								name: 'images',
								url: i
							})
						}
						let skuDefaultImg = []
						if (res.data.specType == 0) {
							if (res.data.skuInfo.skuDefaultImg != null) {
								skuDefaultImg.push({
									name: 'images',
									url: res.data.skuInfo.skuDefaultImg
								})
							}
							res.data.skuInfo.virtualType = res.data.skuInfo.virtualType+''
							res.data.skuInfo.skuDefaultImg = skuDefaultImg
						} else {
							res.data.skuInfo = {
								skuDefaultImg: [],
								price: 0,
								cost: 0,
								otPrice: 0,
								saleMoney: 0,
								stock: 0,
								volume: 0,
								weight: 0,
								isVirtual: 0,
								diskInfo:'',
								virtualType:''
							}
							state.specArr = res.data.skuInfos
							for ( let arr  of state.specArr){
								arr.virtualType = arr.virtualType+''
							}
							
						}


						if (res.data.logistics != null) {
							let logistics = res.data.logistics.split(",");
							res.data.logistics = logistics
						} else {
							res.data.logistics = []
						}
						if (res.data.otherType != null) {
							let otherType = res.data.otherType.split(",");
							res.data.otherType = otherType
						} else {
							res.data.otherType = []
						}
						if (res.data.labelId != null) {
							let labelId = res.data.labelId.split(",");
							res.data.labelId = labelId
						} else {
							res.data.labelId = []
						}
						
						
						
						
						

						res.data.images = images
						state.form = res.data
						state.form.goodsType = res.data.goodsType + ''
						state.form.publishStatus = res.data.publishStatus + ''
						state.form.specType = res.data.specType + ''
						state.form.freight = res.data.freight + ''
						state.form.hasVideo = res.data.hasVideo + ''
						state.form.videoType = res.data.videoType + ''
						state.form.vipProduct = res.data.vipProduct + ''
						state.form.isLimit = res.data.isLimit + ''
						state.form.limitType = res.data.limitType + ''
						state.form.presale = res.data.presale + ''
						state.form.logistics = res.data.logistics + ''
						if (state.form.labelId.length > 0) {
							getMemberLabel(1)

						}
					})
					state.id = route.query.id
				}



				nextTick(() => {
					initSort()
				})
			})
			const ruleRefForm = ref()
			const uploadBanner = ref()
			// 切换步骤
			const handleClick = () => {

			}
			//获取分类
			const getCategory = () => {
				getCategoryTree({isWork: "1"}).then(res => {
					state.classify = res.data
				})
			}
			const addClassify = () => {
				state.classifyForm = {
					parentId: 0,
					name: '',
					icon: '',
					sort: 1,
					showStatus: 1
				}
				state.dialogClassifyVisible = true
			}
			const spliceItem = (index) => {
				state.form.images.splice(index, 1)
			}
			// 选择轮播图
			const chooseImage = () => {
				state.isMultiple = true
				state.imageType = 'banner'
				state.dialogType = 'image'
				state.dialogMaterialVisible = true
				nextTick(() => {
					initSort()
				})
			}
			const initSort = () => {
				const imageDom = document.querySelector('.upload-box .el-upload-list');
				if (!imageDom) return
				Sortable.create(imageDom, {
					animation: 180,
					delay: 0,
					direction: 'horizontal',
					onEnd({
						newIndex,
						oldIndex
					}) {
						const currRow = state.form.images.splice(oldIndex, 1)[0];
						state.form.images.splice(newIndex, 0, currRow);
					},
				})
			}
			// 选择视频
			const chooseVideo = () => {
				state.isMultiple = false
				state.imageType = 'video'
				state.dialogType = 'video'
				state.dialogMaterialVisible = true
			}
			const submitForm = async (formEl) => {
				if (!formEl) return
				await formEl.validate((valid) => {
					if (valid) {
						if (state.activeName != 5) {
							nextStep()
						} else {
							let data = JSON.parse(JSON.stringify(state.form))
							// for(let key in state.form){
							//     data[key] = state.form[key]
							// }
							console.log(data.images)
							if (data.images.length > 0) {
								data.images.forEach((e, index) => {
									data.images[index] = e.url
								})
							}
							
							if (data.catalogId instanceof Array) {
								data.catalogId = data.catalogId[data.catalogId.length - 1]
							}
							if (data.logistics instanceof Array) {
								data.logistics = data.logistics.join(",")
							}
							if (data.labelId instanceof Array) {
								data.labelId = data.labelId.join(",")
							}
							if (data.otherType instanceof Array) {
								data.otherType = data.otherType.join(",")
							}
							if (data.specType == 0) {
								if (data.skuInfo.skuDefaultImg instanceof Array) {
									let list = []
									data.skuInfo.skuDefaultImg.forEach((e, index) => {
										list.push(e.url)
									})
									data.skuInfo.skuDefaultImg = list.join(",")
								}
								data.skuInfo.catalogId = data.catalogId || ''
								data.skuInfo.skuName = data.skuInfo.skuName || data.skuInfo.skuTitle
							}else{
								data.skuInfo ={
										skuId: '',
										spuId: '',
										skuName: '',
										skuDesc: '',
										catalogId: data.catalogId || '',
										skuDefaultImg: '',
										price: 0,
										cost: 0,
										weight: 0,
										volume: 0,
										otPrice: 0,
										saleMoney: 0,
										barCode: '',
										vipPrice: 0,
										brokerage: 0,
										brokerageTwo: 0,
										stock: 0,
										attrs: [],
										isVirtual: 0,
										diskInfo:'',
										virtualType: '',
										virtuals:[]
									}
							}

							data.skuInfos = state.specArr
							
							if (data.id == null || data.id == '') {
								if(data.goodsType == '3'){
									for(let i = 0; i < data.formSettingList.length; i++) {
										if(data.formSettingList[i].typeValue == 6 || data.formSettingList[i].typeValue == 7 || data.formSettingList[i].typeValue == 8) {
											if (typeof(data.formSettingList[i].optionList) == 'string') {
												let options = data.formSettingList[i].optionList.split("\n")
												let optionList = []
												options.forEach((item, idx) => {
													optionList.push({
														formType: data.formSettingList[i].typeValue,
														label: item,
														value: idx
													})
												})
												data.formSettingList[i].optionList = optionList
											}
										}
									}
								}
								create(data).then(res => {
									if (res.code == 0) {
										ElMessage({
											type: 'success',
											message: '新增成功',
										})
										router.push({
											path: '/shop/list'
										})
									} else {
										ElMessage({
											type: 'error',
											message: '新增失败',
										})
									}
								})
							} else {
								console.log("进入新增");
								update(data).then(res => {
									if (res.code == 0) {
										ElMessage({
											type: 'success',
											message: '编辑成功',
										})
										router.push({
											path: '/shop/list'
										})
									} else {
										ElMessage({
											type: 'error',
											message: '编辑失败',
										})
									}
								})
							}
						}
					}
				})
			}
			const nextStep = () => {
				let activeName = 0
				let flag = true
				if (state.activeName == '1' && state.form.specType == 1) {
					if (state.specArr.length < 1) {
						flag = false
						ElMessage.error('请生成规格列表')
					}
				}

				if (flag) {
					if (state.form.goodsType != 0 && state.activeName == '2') {
						activeName = parseInt(state.activeName) + 2
					} else {
						activeName = parseInt(state.activeName) + 1
					}
					state.activeName = activeName + ''
				}
			}
			// 加载该分类下的规格属性
			const handleSelectAttr = () => {
				let catalogId = state.form.catalogId instanceof Array ? state.form.catalogId[state.form.catalogId.length - 1]:state.form.catalogId
				selectAttr({
					catalogId: catalogId
				}).then(res => {
					state.specList = res.data
				})

			}
			const chooseSpecImage = () => {
				state.isMultiple = true
				state.imageType = 'spec'
				state.dialogType = 'image'
				state.dialogMaterialVisible = true
			}



			const chooseSpec = e => {
				console.log(e)
				handleSelectAttr()
				state.specId = e
				submitSpec(e)
			}
			const submitSpec = (list) => {
				// const specId = state.specId
				// const list = state.specValue
				const specList = state.specList
				if (state.specValue.length < 1) {
					ElMessage.error('请选择规格属性')
				}
				let array = new Array();
				for (let i = 0; i < list.length; i++) {
					for (let j = 0; j < specList.length; j++) {
						if (specList[j].value == list[i]) {
							array.push(specList[j])
						}
					}
				}
				state.form.specList = array
				state.specArr = []
				calculateSpec()

			}
			const openSpec = () => {
				state.specForm = {
					name: '',
					label: '',
					value: []
				}
				state.dialogSpecVisible = true
			}
			const delSpecItem = index => {
				state.specValue.splice(index, 1)
				state.form.specList.splice(index, 1)
				if (state.specArr.length > 0) {
					calculateSpec()
				}
			}
			const calculateSpec = () => {
				const arr = state.form.specList
				let data = []
				for (let i = 0; i < arr.length; i++) {
					data.push(arr[i].valueSelect)
				}

				const caculateList = calcDescartes(data)
				let list = []
				for (let i = 0; i < caculateList.length; i++) {
					list.push({
						skuId: '',
						spuId: '',
						skuName: '',
						skuDesc: '',
						catalogId: '',
						skuDefaultImg: '',
						price: 0,
						cost: 0,
						weight: 0,
						volume: 0,
						otPrice: 0,
						saleMoney: 0,
						barCode: '',
						vipPrice: 0,
						brokerage: 0,
						brokerageTwo: 0,
						stock: 0,
						attrs: [],
						isVirtual: 0,
						diskInfo:'',
						virtualType: '',
						virtuals:[]
					})
					let attrs = []
					for (let j = 0; j < caculateList[i].length; j++) {
						let attrValue = {}
						let v = caculateList[i]
						let attrName = arr[0].label
						if (arr.length > 1) {
							v = caculateList[i][j]
							attrName = arr[j].label
						}
						list[i]['value' + (j + 1)] = v
						attrValue['attrName'] = attrName
						attrValue['attrValue'] = v
						attrs.push(attrValue)
					}
					list[i].attrs = attrs

				}
				state.specArr = list
				console.log(state.specArr)
			}
			const calcDescartes = (array) => {
				if (array.length < 2) return array[0] || [];
				return [].reduce.call(array, function(col, set) {
					var res = [];
					col.forEach(function(c) {
						set.forEach(function(s) {
							var t = [].concat(Array.isArray(c) ? c : [c]);
							t.push(s);
							res.push(t);
						})
					});
					return res;
				});
			}
			const delSpec = (index, idx) => {
				state.form.specList[index].valueSelect.splice(idx, 1)
				if (state.specArr.length > 0) {
					calculateSpec()
				}
			}
			const addSpec = (index) => {
				if (state.form.specList[index].specValueName.length > 0) {
					state.form.specList[index].valueSelect.push(state.form.specList[index].specValueName)
					state.form.specList[index].specValueName = ''
					if (state.specArr.length > 0) {
						calculateSpec()
					}					
				}
				state.form.specList[index].showInput = false
			}
			const saveNewSpec = () => {
				state.form.specList.push(state.newSpecForm)
				state.isaddNewSpec = false
				if (state.specArr.length > 0) {
					calculateSpec()
				}
			}
			const addNewSpec = () => {
				state.newSpecForm = {
					label: '',
					valueSelect: []
				}
				state.isaddNewSpec = true
			}
			const addBatch = () => {
				const list = state.specArr
				const batch = state.specBatch[0]
				for (let i = 0; i < list.length; i++) {
					for (let key in batch) {
						list[i][key] = batch[key]
					}
				}
				state.specArr = list
			}
			const clearBatch = () => {
				const list = state.specArr
				const batch = state.specBatch[0]
				for (let i = 0; i < list.length; i++) {
					for (let key in batch) {
						if (key == 'barCode') {
							list[i][key] = ''
							batch[key] = ''
						} else {
							list[i][key] = 0
							batch[key] = 0
						}
					}
				}
				state.specBatch[0] = batch
				state.specArr = list
			}
			const chooseSpecImageItem = (index) => {
				state.specIndex = index
				state.isMultiple = false
				state.imageType = 'specItem'
				state.dialogType = 'image'
				state.dialogMaterialVisible = true
			}
			const removeSpecItem = (index) => {
				state.specArr.splice(index, 1)
			}
			// 删除选中的优惠券
			const handleRemoveCoupon = (index) => {
				if(index > -1){
					state.specArr[index].couponId = ''
					console.log(state.specArr[index])
				}else{
					state.form.skuInfo.couponId = ''
				}
				
			}
			const lastStep = () => {
				let activeName = 0
				if (state.form.goodsType != 0 && state.activeName == '4') {
					activeName = parseInt(state.activeName) - 2
				} else {
					activeName = parseInt(state.activeName) - 1
				}
				state.activeName = activeName + ''
			}
			const addFeeModel = () => {
				state.logisticForm = {
					valuationModel: 0,
					isInclPostageByif: 1,
					noDelivery: 1,
					isDefault: 1,
					//运送方式
					transportMode: [{
						area: [{
							label: '全国',
							id: 0
						}],
						firstNum: 1,
						firstPrice: 0,
						continueNum: 1,
						continuePrice: 0
					}],
					// 指定包邮
					freeConditions: [],
					// 指定不送达
					noDeliverys: []
				}
				state.dialogLogisticVisible = true
			}
			const addDiscount = () => {
				state.defaultSearchForm = {
					couponName: '',
					publishStatus: '1',
					couponType:'2',
					current: 1,
					size: 10,
				}
				state.couponType = 0
				state.isBatch = true
				state.dialogCouponVisible = true
				
			}

			const selectCouponSubmit = (data) => {
				
				if(state.couponType == 0){
					state.form.discount = data
				}else if(state.couponType == 1){
					state.form.skuInfo.couponId = data[0].id
					state.form.skuInfo.couponName = data[0].couponName
				}
				else if(state.couponType == 2){
					state.specArr[state.specArrIndex].couponId = data[0].id
					state.specArr[state.specArrIndex].couponName = data[0].couponName
				}
				
				state.dialogCouponVisible = false
			}
			const delDiscount = (index) => {
				state.form.discount.splice(index, 1)
			}
			const delmemberLabel = (index) => {
				state.form.memberLabelList.splice(index, 1)
			}
			const delPaper = () => {
				state.form.isHasPaper = 0
				state.form.paperId = null
				state.form.paperName = null
			}
			
			const addLabel = () => {
				state.memberLabelTitle = '新增标签'
				state.dialogMemberLabelVisible = true
			}
			const handlePictureCardPreview = (file) => {
				state.dialogImageUrl = file.url
				state.dialogBannerVisible = true
			}
			const handleRemove = file => {
				uploadBanner.value.handleRemove(file)
			}
			const handleChange = file => {
				console.log(file)
			}
			const handlePictureVideoPreview = file => {
				state.dialogVideoUrl = file.url
				state.dialogVideoVisible = true
			}
			const classifySubmit = () => {
				getCategory()
				state.dialogClassifyVisible = false
			}
			const imagesOnSuccess = (response, uploadFiles) => {
				let data = state.form.images
				data.forEach((e, index) => {
					if(e.name == 'images'){
						data[index] = e
					}else{
						try {
							data[index] = {
								name: e.response.data.name,
								src: e.response.data.src,
								url: e.response.data.src
							}
						} catch(err) {
							data[index] = {
								name: e.name,
								src: e.src,
								url: e.src
							}
						}
				  	}
				})
				console.log(data)
				state.form.images = data
			}
			const handleSkuImgSuccess = (res, file, fileList, index) => {
				state.specArr[index].skuDefaultImg = res.data.src
			}
			const handleSkuBatchImgSuccess = e => {
				state.specBatch[0].skuDefaultImg = e.data.src
				state.specArr.forEach(event => {
					event.skuDefaultImg = e.data.src
				})
			}
			const relationLabel = () => {
				state.memberLabelTitle = '关联用户标签'
				// 获取标签分类
				getMemberLabelCategory()
				// 获取所有标签
				getMemberLabel()
				state.dialogMemberLabelVisible = true
			}
			const relationPaper = () => {
				state.paperTitle = '关联问卷调查表'
				state.dialogPaperVisible = true
			}

			const getMemberLabelCategory = () => {
				getMemberLabelCategoryList().then(res => {
					state.memberLabelCategoryList = res.data
				})
			}
			const getMemberLabel = (e) => {
				getMemberLabelList().then(res => {
					state.memberLabelList = res.data
					if (e == 1) {
						memberLabelSubmit(state.form.labelId)
					}
				})
			}
			const memberLabelSubmit = (data) => {
				state.form.labelId = data
				state.selectMemberLabelIds = data
				let v = []
				for (let m of data) {
					for (let ml of state.memberLabelList) {
						if (ml.id == m) {
							v.push(ml)
						}
					}
				}
				state.form.memberLabelList = v
				state.dialogMemberLabelVisible = false
			}
			const handleSelectTemp = () => {
				api.handleSelectTemp().then(res => {
					state.logisticList = res.data
				})
			}
			// 添加优惠券
			const addCoupon = (index) => {
				state.defaultSearchForm = {
					couponName: '',
					publishStatus: '1',
					couponType:'4',
					current: 1,
					size: 10,
				}
				// 单规格
				if(state.form.specType == 0){
					state.couponType = 1
				}
				// 多规格
				else{
					state.specArrIndex = index
					state.couponType = 2
				}
				
				state.isBatch = false
				state.dialogCouponVisible = true
			}
			
			// 添加卡密
			const addVirtual = (index) => {
				
				let virtualForm = {
					virtualType: '0',
					diskInfo:'',
					virtuals:[],
					stock:0
				}
				// 单规格
				if(state.form.specType == 0){
					if(state.form.skuInfo.virtualType == 0){
						virtualForm.diskInfo = state.form.skuInfo.diskInfo 
						virtualForm.virtualType = '0'
					}
					
					else{
						virtualForm.virtuals = state.form.skuInfo.virtuals 
						virtualForm.virtualType = '1'
					}
				}
				// 多规格
				else{
					state.specArrIndex = index
					if(state.specArr[index].virtualType == 0){
						virtualForm.diskInfo = state.specArr[index].diskInfo 
						virtualForm.virtualType = '0'
					}
					else{
						virtualForm.virtuals = state.specArr[index].virtuals 
						virtualForm.virtualType = '1'
					}
				}
				state.virtualForm = virtualForm
				state.dialogVirtualVisible = true
			}
			
			
			const addVirtualSubmit = (data) => {
				
				// 单规格
				if(state.form.specType == 0){
					state.form.skuInfo.virtualType = data.virtualType
					// 固定卡密
					if(data.virtualType == 0){ 
						state.form.skuInfo.diskInfo = data.diskInfo
					}
					// 一次性卡密
					else if(data.virtualType == 1){
						state.form.skuInfo.virtuals = data.virtuals
					} 
				}
				// 多规格
				else{
					state.specArr[state.specArrIndex].virtualType = data.virtualType
					// 固定卡密
					if(data.virtualType == 0){ 
						state.specArr[state.specArrIndex].diskInfo = data.diskInfo
					}
					// 一次性卡密
					else if(data.virtualType == 1){
						state.specArr[state.specArrIndex].virtuals = data.virtuals
					} 
				}
				state.dialogVirtualVisible = false
			}
			
			const addBatchOther = (val) => {
				const list = state.specArr
				const batch = state.otherSetting
				for (let i = 0; i < list.length; i++) {
					for (let key in batch) {
						list[i][key] = batch[key]
					}
				}
				state.specArr = list
			}
			const selectPaperSubmit = (val) => {
				state.form.isHasPaper = 1
				state.form.paperId = val[0].id
				state.form.paperName = val[0].name
				state.dialogPaperVisible = false
			}
			const addLogistic = (val) => {
				handleSelectTemp()
				state.dialogLogisticVisible = false
			}
			// 显示表单弹窗
			const showFormDetail = (type, param) => {
				if(type == 0){
					state.formTypeData = {
						spuId: isEdit.value?state.form.id:null,
						name: '',
						typeValue: 0,
						typeName: '单行文本',
						hintText: '请输入',
						optionList: [],
						preciseNum: 0,
						inputNum: 0,
						dateType: 0,
						preciseLevel: 0,
						isShieldTime: 0,
						shieldTimeList: [],
						isShieldDate: 0,
						shieldDateList: [],
						isRequired: 0,
					}
				}else{
					param.spuId = state.form.id
					state.formTypeData =JSON.parse(JSON.stringify(param))
				}				
				state.formTitle = type == 0 ? '添加信息项' : '编辑信息项'
				formStores.table = state.form.formSettingList
				state.dialogFormVisible = true
			}
			// 删除信息项
			const deleteFormData = (val, index) => {
				if(isEdit.value){
					ElMessageBox.confirm(
						'是否确认删除名称为"' + val.name + '"的数据项？',
						'提示',
						{
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
						}
					).then(() => {
						api.delFormSetting(val.id).then(res => {
							if (res.code == 0) {
								ElMessage({
									type: 'success',
									message: '删除成功',
								})
								formTableData()
							} else {
								ElMessage({
									type: 'error',
									message: '删除失败：' + res.message,
								})
							}
						})
					}).catch()
				}else {
					delete state.form.formSettingList[index]
				}							
			}
			// 加载列表
			const formTableData = () => {
				api.spuFormSetting(state.form.id).then(res => {
					state.form.formSettingList = res.data
				})
			}
			// 修改是否必填选项
			const updateFormState = (param) => {
				if (isEdit.value) {
					api.editFormSetting(param).then(res => {
						ElMessage.success("修改成功")
					})
				}
			}
			// 刷新表单数据
			const refreshClick = (val) => {
				if (val.length > 0) {
					state.form.formSettingList = val
				}else{
					formTableData()
				}
			}
			// 显示输入框获取焦点
			const showTagInput = (val) => {
				state.form.specList.map(item => {
					item.showInput = false
				})				
				state.form.specList[val].showInput = true
				document.getElementById(state.form.specList[val].specValueName)?.focus()
			}
			
			return {
				...toRefs(state),
				getCategory,
				handleClick,
				addClassify,
				spliceItem,
				chooseImage,
				chooseVideo,
				ruleRefForm,
				submitForm,
				handleSelectAttr,
				chooseSpecImage,
				chooseSpec,
				submitSpec,
				openSpec,
				delSpecItem,
				delSpec,
				addSpec,
				saveNewSpec,
				addNewSpec,
				calculateSpec,
				addBatch,
				clearBatch,
				chooseSpecImageItem,
				removeSpecItem,
				lastStep,
				addFeeModel,
				addDiscount,
				delDiscount,
				addLabel,
				handlePictureCardPreview,
				handleRemove,
				uploadBanner,
				handleChange,
				handlePictureVideoPreview,
				classifySubmit,
				imagesOnSuccess,
				handleSkuImgSuccess,
				handleSkuBatchImgSuccess,
				selectCouponSubmit,
				relationLabel,
				memberLabelSubmit,
				getMemberLabel,
				getMemberLabelCategory,
				handleSelectTemp,
				addVirtual,
				addCoupon,
				handleRemoveCoupon,
				addVirtualSubmit,
				addBatchOther,
				relationPaper,
				selectPaperSubmit,
				delPaper,
				addLogistic,
				showFormDetail,
				deleteFormData,
				formTableData,
				refreshClick,
				showTagInput,
				updateFormState,
			}
		}
	}
</script>

<style scoped lang="scss">
	:deep(.el-tabs--card>.el-tabs__header .el-tabs__item.is-active) {
		background: var(--next-color-white);
	}

	:deep(.el-tabs__header) {
		margin-bottom: 0;
	}

	.container-item {
		background: var(--next-color-white);
		padding: 15px;
		border: 1px solid var(--el-border-color-light);
		border-top: none;

		.image_box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

		.image_list {
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
		}

		.image-cell,
		.item-row {
			width: 60px;
			height: 60px;
			margin-right: 15px;
			position: relative;
			border: 1px dashed #eee;
			border-radius: 5px;

			.close-icon {
				position: absolute;
				top: -5px;
				right: -8px;
				z-index: 10;
				cursor: pointer;
				width: 15px;
				height: 15px;
				background: var(--next-bg-main-color);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px dashed var(--el-border-color-light);

				i {
					color: var(--el-text-color-regular);
					font-size: 10px;
				}
			}
		}

		.item-row {
			display: flex;
			align-items: center;
			justify-content: center;
			background: var(--next-bg-main-color);
			cursor: pointer;
			font-size: 18px;
			color: var(--el-text-color-regular);
		}

		.alert-tips {
			margin-top: 5px;
			font-size: 12px;
			color: var(--el-color-info);
		}

		.spec-name {
			color: var(--el-text-color-primary);
			font-size: 13px;

			.spec-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: -2px;
				margin-left: 5px;
				cursor: pointer;

				&:hover {
					:deep(.el-icon) {
						color: var(--el-color-danger);
					}
				}
			}
		}

		.specList {
			margin-bottom: 10px;
		}

		.spec-list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.spec_area {
				display: flex;
				align-items: center;

				:deep(.el-input--mini .el-input__inner) {
					height: 25px;
					line-height: 25px;
					width: 120px;
					padding-right: 31px;
				}

				:deep(.el-button--mini) {
					padding: 5px 10px 6px;
					margin-left: -20px;
					position: relative;
					z-index: 10;
				}
			}
		}

		.spec_btn {
			padding: 4px 10px;
		}

		.label-tips {
			font-size: 12px;
			color: var(--el-text-color-regular);
		}

		.desc-list {
			display: flex;
			align-items: stretch;

			.phone-model {
				margin-left: 20px;
				border-radius: 10px;
				width: 300px;
				padding: 10px;
				box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

				.phone-title {
					font-size: 16px;
					text-align: center;
					color: #333;
				}

				.model-container {
					word-break: break-all;
					line-height: normal;

					:deep(img) {
						max-width: 100% !important;
						object-fit: contain;
					}
				}
			}
		}

		.desc-content {
			flex: 1;
			overflow: hidden;
		}

		.small-tips {
			font-size: 12px;
			margin-right: 8px;
			color: var(--el-text-color-regular);
		}

		.batch-list {
			display: flex;
			align-items: center;
		}
	}

	[data-theme='dark'] {
		.container-item {
			background: var(--next-bg-main-color);
		}
	}

	.skuImg {
		img {
			width: 50px;
			height: 50px;
		}
	}
</style>
<style lang="scss">
	.goods-userLabel {
		.el-checkbox {
			margin-right: 0;
		}
	}

	.skuImg .el-upload {
		cursor: pointer;
		position: relative;
		overflow: hidden;
		border: 1px dashed var(--el-border-color-darker);
		border-radius: 6px;
		box-sizing: border-box;
		transition: var(--el-transition-duration-fast);
	}

	.skuImg .el-upload:hover {
		border-color: var(--el-color-primary);
		color: var(--el-color-primary);
	}

	.skuImg .el-icon.uploader-icon {
		font-size: 28px;
		width: 50px;
		height: 50px;
		text-align: center;
	}

	.good-type-box {
		width: 180px;
		height: 60px;
		border: 1px solid #bbbbbb;
		border-radius: 5px;
		margin-right: 20px;
		padding: 10px;
		position: relative;

		.type-title {
			font-size: 15px;
			font-weight: bold;
		}

		.center-text {
			color: #bbbbbb;
		}
	}

	.choiceActive {
        color: #02b978;
        background: rgba(154, 237, 197, 0.5);
        &::before {
          content: '';
          position: absolute;
          right: 0;
          bottom: 0;
          border: 16px solid #02b978;
          border-top-color: transparent;
          border-left-color: transparent;
        }
        &::after {
          content: '';
          width: 5px;
          height: 10px;
          position: absolute;
          right: 6px;
          bottom: 7px;
          border: 1px solid #fff;
          border-top-color: transparent;
          border-left-color: transparent;
          transform: rotate(45deg);
        }
	}

	.img-idx-activity {
		border: 1px solid #fe714b;
		color: #fe714b;
	}

</style>
